<template>
  <div>
    <div class="menu-list">
      <div class="item" @click="simulationSettings">仿真设置</div>
      <div class="item" @click="goPage('/data-view')">参数查看</div>
    </div>
    <div class="search-box">
      <el-input
        v-model="timePoint"
        type="number"
        style="width: 100%"
        placeholder="请输入时间点"
        @keyup.enter="getDataByTime"
      >
      </el-input>
    </div>

    <el-dialog v-model="visible" width="1000" align-center>
      <div class="modal one">
        <div class="title">
          <span></span>
          <el-icon color="#fff" style="cursor: pointer" @click="visible = false"
            ><CloseBold
          /></el-icon>
        </div>
        <div class="btn-group">
          <div
            class="mode-btn"
            v-for="(item, index) in modeList"
            :key="index"
            :style="{ 'background-image': `url(${item.btn})` }"
            @click="changeMode(item)"
          ></div>
          <!-- <el-button>双构网主动支撑控制</el-button>
          <el-button>自适应下垂控制</el-button>
          <el-button>直流故障协同控制</el-button>
          <el-button>交流故障协同控制</el-button>
          <el-button>VSG运行限幅控制</el-button>
          <el-button>如东工程仿真验证</el-button> -->
        </div>

        <div class="dialog-footer">
          <div
            class="btn all"
            title="全部参数"
            @click="openAllParamsDialog"
          ></div>
          <div class="btn load" title="加载数据" @click="ok"></div>
        </div>
      </div>
    </el-dialog>

    <el-dialog v-model="visible2" width="1200" align-center>
      <div class="modal two" style="height: 840px">
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
          "
        >
          <div class="title">
            <span></span>
            <el-icon
              color="#fff"
              style="cursor: pointer"
              @click="visible2 = false"
              ><CloseBold
            /></el-icon>
          </div>
          <div class="tabs-box">
            <el-tabs v-model="activeName" type="card" class="demo-tabs">
              <el-tab-pane
                :label="item.label"
                :name="item.name"
                v-for="(item, index) in tabs"
                :key="index"
              >
                <el-form :model="form" label-width="330px">
                  <el-row :gutter="10">
                    <el-col
                      :span="12"
                      v-for="(child, j) in item.formList"
                      :key="j"
                    >
                      <el-form-item :label="child.label">
                        <el-input
                          v-model="form[child.key]"
                          style="width: 200px"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>

          <div class="dialog-footer">
            <div class="btn confirm" @click="submit"></div>
            <!-- <div class="btn load" @click="ok" title="加载数据"></div> -->
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="visible3" width="400" align-center>
      <PanelLayout style="height: 200px">
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
          "
        >
          <div class="title">
            <span>提示</span>
            <el-icon
              color="#fff"
              style="cursor: pointer"
              @click="visible3 = false"
              ><CloseBold
            /></el-icon>
          </div>
          <div style="color: #fff">仿真时间较长，是否加载以往数据。</div>
          <div class="dialog-footer">
            <el-button type="primary" @click="ok">是</el-button>
            <el-button @click="cancel">否</el-button>
          </div>
        </div>
      </PanelLayout>
    </el-dialog>
  </div>
</template>

<script setup name="MenuList">
import { uploadFile } from '@/utils/upload-file.js'
import useAppStore from '@/store/modules/app'
import PanelLayout from '@/views/index/PanelLayout.vue'
import {
  formDefaultVal1,
  formDefaultVal2,
  formDefaultVal3,
  formDefaultVal4,
  formDefaultVal5,
  formDefaultVal6,
  formDefaultVal7,
  formDefaultVal8
} from '@/store/modules/formParams.js'
import {
  Mode1,
  Mode2,
  Mode3,
  Mode4,
  Mode5,
  Mode6
} from '@/store/modules/modeDefault.js'
import { postFzptParams } from '@/api/base.js'

const emit = defineEmits(['changeMode'])

const route = useRoute()
const router = useRouter()
const appStore = useAppStore()

const modeList = [Mode1, Mode2, Mode3, Mode4, Mode5, Mode6]

const goPage = path => {
  // console.log(route.fullPath, path)
  if (path === route.fullPath) {
    // 刷新当前路由
    appStore.refreshRouterView()
  } else {
    router.push(path || '/index')
  }
}

const timePoint = ref('')
const getDataByTime = () => {
  appStore.setTimePoint(timePoint.value)
}

const visible = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)

const activeName = ref('风电集群全局设置')

const form = ref({})
const tabs = ref([])

const tabInit = () => {
  tabs.value = [
    {
      label: '风电集群全局设置',
      name: '风电集群全局设置',
      formList: formDefaultVal1
    },
    {
      label: '送端1风场',
      name: '送端1风场',
      formList: formDefaultVal2
    },
    {
      label: '送端2风场',
      name: '送端2风场',
      formList: formDefaultVal3
    },
    {
      label: '送端3风场',
      name: '送端3风场',
      formList: formDefaultVal4
    },
    {
      label: '送端全局设置',
      name: '送端全局设置',
      formList: formDefaultVal5
    },
    {
      label: '送端设置',
      name: '送端设置',
      formList: formDefaultVal6
    },
    {
      label: '受端设置',
      name: '受端设置',
      formList: formDefaultVal7
    },
    {
      label: '故障设置',
      name: '故障设置',
      formList: formDefaultVal8
    }
  ]
}

const initFormValue = () => {
  const allParams = [
    ...formDefaultVal1,
    ...formDefaultVal2,
    ...formDefaultVal3,
    ...formDefaultVal4,
    ...formDefaultVal5,
    ...formDefaultVal6,
    ...formDefaultVal7,
    ...formDefaultVal8
  ]
  // console.log(allParams)
  allParams.map(item => {
    form.value[item.key] = item.value
  })
}
initFormValue()

const simulationSettings = () => {
  visible.value = true
}

const submit = () => {
  // console.log(form.value)
  postFzptParams({
    ...form.value,
    path: 'D:\/pricateJob\/0327DaPing\/csvs'
  }).then(res => {
    // console.log(res)
    if (res.code === '0000') {
      visible.value = false
      visible2.value = false
      visible3.value = true
    }
  })
}

const ok = () => {
  uploadFile()
    .then(res => {
      // console.log(res)
      // 上传成功，刷新页面
      visible.value = false
      visible2.value = false
      visible3.value = false
      goPage('/data-view')
    })
    .catch(err => {
      console.log(err)
      // 上传失败
    })
}
const cancel = () => {
  visible.value = false
  visible2.value = false
  visible3.value = false
  // 调用本地exe
  window.open('C:/Users/zheng/Desktop/风电场仿真平台/风电场仿真平台.exe')
  goPage('/data-view')
}

const changeMode = item => {
  // console.log(item)
  appStore.setChartDefault(item)
  emit('changeMode')
  tabInit()
  tabs.value.unshift({
    label: '关键参数',
    name: '关键参数',
    formList: item.form
  })
  activeName.value = '关键参数'

  item.form.map(item => {
    form.value[item.key] = item.value
  })
  visible2.value = true
}

const openAllParamsDialog = () => {
  tabInit()
  activeName.value = '风电集群全局设置'
  visible2.value = true
  visible.value = false
}

defineExpose({
  changeMode
})
</script>

<style lang="scss" scoped>
.menu-list {
  position: absolute;
  top: 38px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 0px;
  .item {
    width: 118px;
    height: 31px;
    background-image: url('@/assets/images/park/d-header/btn-bg@2x.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: rgba(254, 254, 254, 0.6);
    cursor: pointer;
    transition: all 0.3s;

    &.active {
      color: rgba(254, 254, 254, 1);
      filter: brightness(200%);
    }

    &:hover {
      color: rgba(254, 254, 254, 1);
      filter: brightness(200%);
    }
  }
}
.search-box {
  position: absolute;
  top: 38px;
  right: 260px;
  width: 210px;
  :deep(.el-input__wrapper) {
    background-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(44, 173, 255, 0.5);
  }

  :deep(.el-input__inner) {
    background-color: transparent;
    color: #fff;
  }

  :deep(.el-input-number__increase) {
    background-color: rgba(44, 173, 255, 0.5);
    color: #fff;
  }

  :deep(.el-input-number__decrease) {
    background-color: rgba(44, 173, 255, 0.5);
    color: #fff;
  }
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 20px;
  margin-bottom: 40px;
  .el-button {
    width: 47%;
    margin: 0;
  }
}
.dialog-footer {
  text-align: center;
  margin-top: auto;
  display: flex;
  align-content: center;
  justify-content: center;
}

:deep(.el-dialog) {
  background-color: transparent;
  color: #fff;
}
:deep(.el-dialog__header) {
  display: none;
}
.title {
  font-size: 18px;
  margin-bottom: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tabs-box {
  flex: 1;
  margin-bottom: 40px;
}
:deep(.el-tabs__item) {
  color: #fff;
}
:deep(.el-tabs__item.is-active) {
  color: var(--el-color-primary);
}
:deep(.el-tabs__nav-next, .el-tabs__nav-prev) {
  color: #fff;
}
:deep(.el-form-item__label) {
  color: #fff;
}
.btn {
  width: 193px;
  height: 48px;
  display: inline-block;
  cursor: pointer;
  &.all {
    background: url('@/assets/images/menu/按钮2全部参数.jpg') center;
  }
  &.load {
    background: url('@/assets/images/menu/按钮2加载数据，大小为193x48像素.jpg')
      center;
    margin-left: 20px;
  }
  &.confirm {
    background: url('@/assets/images/menu/按钮确定.jpg') center;
  }
}
.modal {
  &.one {
    background-image: url('@/assets/images/menu/六个按钮页面背景，大小为1000x667像素.jpg');
    background-repeat: no-repeat;
    background-size: 100% 101%;
    aspect-ratio: 1000/660;
    padding: 0px;
    display: flex;
    flex-direction: column;
    .title {
      margin: 0;
      margin-right: 20px;
      margin-top: 20px;
    }
    .btn-group {
      margin: 70px;
      overflow-y: auto;
      margin-top: 50px;
      flex: 1;
      .mode-btn {
        cursor: pointer;
        width: 48%;
        height: calc(100% / 337 * 63);
        // aspect-ratio: 337/63;
        background-image: url('@/assets/images/menu/按钮双构网主动支撑控制.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
    .dialog-footer {
      margin-bottom: 50px;
    }
  }
  &.two {
    background-image: url('@/assets/images/menu/输入参数页面背景，大小为1000x667像素.jpg');
    background-repeat: no-repeat;
    background-size: 100% 101%;
    aspect-ratio: 1000/660;
    padding: 0px;
    display: flex;
    flex-direction: column;
    .title {
      margin: 0;
      margin-right: 20px;
      margin-top: 20px;
    }
    .tabs-box {
      margin: 100px;
      overflow-y: auto;
      margin-top: 50px;
    }
    .dialog-footer {
      margin-bottom: 50px;
      .btn {
        cursor: pointer;
      }
    }
  }
}
</style>
